<template>
	<view class="bgff c00 room">
		<text @click="onClose" class="close fs26 c00 px14">×</text>
		<view class="aliC fs16 py16">包间预约详情</view>
	
	

		<scroll-view scroll-y class="list">
			<scroll-view scroll-x class="mt8">
				<view class="px10 fs12 nowrap">
					<view v-for="(date, index) in time" :key="index" @click="switchTabDate(index)"
						class="aliC bor r5 w40 px12 py10 mx3 flex flexCol flexC"
						:class="index == dateTabIndex ? 'bg41' : ''">
						<view class="">{{date.date}}</view>
						<view class="mt2">{{date.week}}</view>
					</view>
				</view>
			</scroll-view>
			<!-- 按时间区间 -->
			<view v-if="currentTab == 0 " class="flex flexC flexW bgf5 c57 py10 px9 mt8">
				<block v-for="(date, index) in dataone" :key="index">
					<view v-if="date.isFree == false"
						class="bge9 c85 shadow aliC r2 w33 py10 boxS mx3 mb6 flex flexCol flexC">
						<view class="flex flexC">
							<image class="w15" src="/static/img/icon/icon_nor.png" mode="aspectFill"></image>
							<text class="ml4" v-if="date.isUseing == true">使用中</text>
							<text class="ml4" v-else="date.isUseing == true">已预定</text>
						</view>
						<view class="mt4 fs12">{{date.time}}</view>
					</view>
					 <view  v-else-if="date.isClean == true" :class="date.selected  == true ? 'bg57' : 'bgff'" class=" cf6c shadow aliC r2 w33 py10 boxS mx3 mb6 flex flexCol flexC">
						<view class="flex flexC">
							<image class="w15" src="/static/img/icon//clean_icon.png" mode="aspectFill"></image>
							<text class="ml4">待保洁</text>
						</view>
						<view class="mt4 fs12">{{date.time}}</view>
					</view> 
					<view v-else-if="date.isFree == true" 
						class="shadow aliC r2 w33 py10 boxS mx3 mb6 flex flexCol flexC"
						:class="date.selected  == true ? 'bg57' : 'bgff'">
						<view class="flex flexC">
							<image class="w15" src="/static/img/icon/icon_nor.png" mode="aspectFill"></image>
							<text class="ml4">空闲</text>
						</view>
						<view class="mt4 fs12">{{date.time}}</view>
					</view>


				</block>
			</view>
			<!-- 按小时 -->
			<view v-else-if="currentTab == 1" class="bgf5 py10 px9 mt8">
				<view class="flex flexC flexW c57">
					<view v-for="(date, index) in hour" :key="index"
						class="aliC r2 w-25 py10 boxS mx3 mb6 flex flexCol flexC" :class="index < 1 ? 'bg57' : 'bgff'">
						<view class="flex flexC">

							<text class="ml4">{{date}}小时</text>
						</view>
						<view class="mt4 fs12"></view>
					</view>
				</view>
				<view class="flex flexC flexJC fs26 bold6 py8">
					<view class="flex flexE bor57 bgff r40 px12">
						<text>10:26</text>
						<image class="w12 ml6 mb7" src="/static/img/icon/edit_sel.png" mode="aspectFill"></image>
					</view>
					<text class="px8 c57 bold4 fs22">---</text>
					<view class="flex flexE bor bgff r40 px12 c85">
						<text>14:26</text>
<!-- 						<image class="w12 ml6 mb7" src="/static/img/icon/edit_nor.png" mode="aspectFill"></image>
 -->					</view>
				</view>
			</view>

			<!-- 按套餐 -->
			<view v-else-if="currentTab == 2" class="bgf5 py10 px9 mt8">
				<view class="flex flexC flexW c57">
					<view v-for="(item, index) in datathree.list" :key="index"
						class="aliC r2 w33 py10 boxS mx3 mb6 flex flexCol flexC" :class="index < 1 ? 'bg57' : 'bgff'">
						<view class="flex flexC">
							<image v-if="index < 1" class="w15" src="/static/img/icon/icon_sel.png" mode="aspectFill">
							</image>
							<image v-else class="w15" src="/static/img/icon/icon_nor.png" mode="aspectFill"></image>
							<text class="ml4">{{item.name}}</text>
						</view>
						<view class="mt4 fs16 bold6">￥{{item.amount}}</view>
					</view>
				</view>
				<view class="flex flexC flexJC fs26 bold6 py8">
					<view class="flex flexE bor57 bgff r40 px12">
						<text>10:26</text>
						<image class="w12 ml6 mb7" src="/static/img/icon/edit_sel.png" mode="aspectFill"></image>
					</view>
					<text class="px8 c57 bold4 fs22">---</text>
					<view class="flex flexE bor bgff r40 px12 c85">
						<text>14:26</text>
<!-- 						<image class="w12 ml6 mb7" src="/static/img/icon/edit_nor.png" mode="aspectFill"></image>
 -->					</view>
				</view>
			</view>
			
		</scroll-view>

	</view>
</template>

<script>
	export default {
		name: "room-detail",
		props: { //props的属性不能修改，必须重新赋值才能修改
			item: {
				type: Object,
				default: {}
			},
			one: {
				type: Array,
				default: {}
			},
			two: {
				type: Object,
				default: {}
			},
			three: {
				type: Object,
				default: {}
			},
			time: {
				type: Array,
				default: {}
			}

		},
		data() {
			return {
				tabs: ['按时间区间', '按小时', '按套餐'],
				currentTab: 0,
				dateTabIndex: 0,
				selectStart: -1,
				selectEnd: -1,
				hour: ['4', '5', '6', '8'],
				dataone: null, //props的属性不能修改，必须重新赋值才能修改
				datatwo: null,
				datathree: null,
				selectHour:0,
				totalPrice:0,
			};
		},
		// onshow() {} 组件内没有onShow,onLoad
		mounted() {
			// if(this.item.set.length>0){
			// 	this.tabs = ['按时间区间','按小时','按套餐']
			// }else{
			// 	this.tabs = ['按时间区间','按小时']
			// }
		},
		watch: {
			//props的属性不能修改，必须重新赋值才能修改
			one(newval, oldval) {
				this.dataone = newval;
			},
			two(newval, oldval) {
				this.datatwo = newval;
			},
			three(newval, oldval) {
				this.datathree = newval;
			}
		},
		methods: {
			
			charge(){
				uni.setStorageSync("shopId",this.item.shop_id+"");
				uni.setStorageSync("tabIndex",0);
				
				uni.switchTab({
					url:'../discount/index'
				})
			},

			clickOneTimeItem(item, index) {

				//props的属性不能修改，必须重新赋值才能修改

				var lastTempEnd = -1;
				if (this.selectStart == -1) {
					this.selectStart = index;
				} else {
					if (this.selectEnd != -1) {
						lastTempEnd = this.selectEnd;
					}
					this.selectEnd = index;

				}
				console.info(this.selectStart + "====11====" + this.selectEnd + "======index==" + index);

				item.selected = true;

				if (this.selectStart > this.selectEnd && this.selectEnd != -1) {
					var temp = this.selectStart;
					this.selectStart = this.selectEnd;
					this.selectEnd = temp;
				} else if (this.selectStart == this.selectEnd) {
					//点击 同一个选择的 取消所有的选中
					
					
					console.info("===lastTempEnd==="+lastTempEnd);
					for (var i = 0; i < this.one.length; i++) {
							
						if (i >= this.selectStart && i <= lastTempEnd ) {
							this.one[i].selected = false;
						}
						
					}
					
					if (this.selectStart == 0 && this.selectEnd == 0) {
						if(lastTempEnd == 0){
							if (this.one[this.selectStart].selected == true) {
								this.one[this.selectStart].selected = false;
							} else {
								this.one[this.selectStart].selected = true;
							}
						}
					
					}
				}

				// console.info("==isSelect=====" + this.one[this.selectStart].selected)
			
				console.info("==isSelect===2==" + this.one[this.selectStart].selected)

				if (this.selectStart != this.selectEnd) {
					var isDoSelect = true;
					for (var i = 0; i < this.one.length; i++) {

						if (i >= this.selectStart && i <= this.selectEnd) {

							if (this.one[i].isFree == false) {
								isDoSelect = false;
								this.one[this.selectEnd].selected = false;
								uni.showToast({
									icon: 'none',
									title: "请选择连续的空闲时间段"
								})
								break;
							}
						}

					}

					if (isDoSelect) {
						for (var i = 0; i < this.one.length; i++) {

							if (i >= this.selectStart && i <= this.selectEnd && this.selectStart != this.selectEnd) {
								this.one[i].selected = true;
							}
							if (i > this.selectEnd && i <= lastTempEnd) {
								this.one[i].selected = false;
							}

						}
					}
				}
				


				var hour = 0;
				for(var i=0;i<this.one.length;i++){
					if(this.one[i].selected == true){
						hour+= 0.5;
					}
				}
				this.selectHour = hour;
				if(hour == 0){
					this.selectStart = -1;
					this.selectEnd = -1;
					
				}
				
				this.totalPrice = hour*this.item.hour_price;
				this.totalPrice = this.totalPrice.toFixed(2);


				// console.info(JSON.stringify(this.one));
			},


			doSubmit(){
				console.info(this.selectHour+"===="+this.item.min_book_hour)
				
				if (this.selectHour < this.item.min_book_hour) {
				
					uni.showToast({
						icon: "none",
						title: "至少要订" + this.item.min_book_hour + "小时"
					})
					return;
				}
			
				
				var obj = new Object();
				obj.id = this.item.id;
				obj.hour = this.selectHour;
				obj.shop_id = this.item.shop_id;
				obj.date = this.time[this.dateTabIndex]['dateValue']
				obj.startTime = this.dataone[this.selectStart];
				
				
				this.dateTabIndex = 0;
				this.selectStart = -1;
				this.selectEnd = -1;
				
				this.$emit("submit",obj)
				
			},

			switchTabDate(index) {
				this.dateTabIndex = index;
				this.selectHour = 0;
				this.totalPrice =0;
				this.selectStart = -1;
				this.selectEnd = -1;
				console.info('=====' + JSON.stringify(this.time[index]))
				this.$emit("selectTimeTab", this.time[index]['dateValue']);
			},

			switchTab(d) {
				this.currentTab = d;
				this.$emit("switchTab", this.currentTab);
			},
			onClose() {
				this.selectStart = -1;
				this.selectEnd = -1;
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.room {
		border-radius: 20rpx 20rpx 0 0;
		position: relative;

		.close {
			position: absolute;
			right: 0;
			top: 8rpx;
		}

		.tip {
			width: 20rpx;
			height: 18rpx;
		}

		.bg {
			background: rgba(87, 109, 171, .5);
		}

		.tabs {
			.active {
				border-bottom: 6rpx solid #576DAB;
			}
		}

		.nowrap {
			white-space: nowrap;
		}

		.w40 {
			width: 80rpx;
			display: inline-block;
		}

		.w15 {
			width: 30rpx;
			height: 30rpx;
		}

		.w12 {
			width: 24rpx;
			height: 24rpx;
		}

		.w33 {
			width: 31.65%;
		}

		.w-25 {
			width: calc(25% - 12rpx);
		}

		.list {
			max-height: 60vh;
		}

		.fixed {
			position: fixed;
			bottom: 40rpx;
			left: 20rpx;
			width: calc(100%);
			overflow: hidden;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);

			.btn {
				height: 100rpx;
			}
		}
	}
</style>
